<!--
   弹出层 html、css、js 封装在此同一个模板文件中，模块化管理
 -->

### isAdd 为 true 表示创建菜单，为 false 表示修改菜单
#set(isAdd = (menu == null))

<!-- 弹出层 title -->
<div class="layui-layer-title" style="cursor: move;">
	#(isAdd ? '创建菜单' : '修改菜单')
</div>

<!-- 弹出层主体内容 -->
<div class="open-box">
	<form id="open-form" action="/admin/menu/#(isAdd ? 'save' : 'update')" onsubmit="return false;">
		
		#if( ! isAdd )
			<input type="hidden" name="menu.id" value="#(menu.id)">
		#end
		
		### 参考 bootstrap 文档：垂直排列表单
		<div class="form-group d-flex">
			<label class="col-form-label">名称</label>
			<div class="flex-grow-1 ml-3">
				<input class="form-control" name="menu.name" value="#(menu.name??)" type="text" autocomplete="off">
			</div>
		</div>
		<div class="form-group d-flex">
			<label class="col-form-label">父级</label>
			<div class="flex-grow-1 ml-3 menuNode">
			      <input type="hidden" name="menu.pid" value="#(menu.pid??'0')" id="menuPid"/>
				  <input class="form-control" id="menuText" name="parentName" value='#(parentName??"顶级")' style="background-color:#fff;" type="text" readonly="readonly"/>
					  <div class="menu-tree"  id="menuTree">
					 </div>				  
			</div>
		</div>
		<div class="form-group d-flex">
			<label class="col-form-label">链接</label>
			<div class="flex-grow-1 ml-3">
				<input class="form-control" name="menu.linkAddr" value="#(menu.linkAddr??)" type="text" autocomplete="off">
			</div>
		</div>
		<div class="form-group d-flex">
			<label class="col-form-label">目标</label>
			<div class="flex-grow-1 ml-3">
				<select class="form-control" name="menu.target" value="#(menu.target??)">
					<option value="_self" #if(menu.target?? == '_self') selected="selected" #end>当前页</option>
					<option value="_blank" #if(menu.target?? == '_blank') selected="selected" #end>新窗口</option>
				</select>
			</div>
		</div>
		<div class="form-group d-flex">
			<label class="col-form-label">位置</label>
			<div class="flex-grow-1 ml-3">
				<select class="form-control" name="menu.menuType" value="#(menu.menuType??)">
					<option value="main" #(menu.menuType?? == 'main' ?selected='selected':'')>主菜单</option>
					<option value="bottom" #(menu.menuType?? == 'bottom' ?selected='selected':'')>底部</option>
				</select>
			</div>
		</div>
		<div class="form-group d-flex">
			<label class="col-form-label">权重</label>
			<div class="flex-grow-1 ml-3">
				<input class="form-control" name="menu.weight" value="#(menu.weight??)" type="number" />
			</div>
		</div>
		
	</form>
</div>

<!-- 弹出层 button -->
<div class="layui-layer-btn" style="padding: 0 25px 20px 0;">
	<a class="layui-layer-btn0">确定</a>
	<a class="layui-layer-btn1">取消</a>
</div>

<link rel="stylesheet" href="/assets/lib/jstree/themes/default/style.min.css" />
<script src="/assets/lib/jstree/jstree.min.js"></script>
<!-- 弹出层样式 -->
<style>
/* 限定左侧 label 宽度，使右侧 input 输入框的宽度保持一致，实现对齐的效果 */
.col-form-label {
	width: 50px;
	text-align: center;
}

#menuTree{
    background-color:#fff;
    border:1px solid #ced4da;
    width:80%;
    visibility: hidden;
    z-index:999;
    overflow-y:scroll;
    height:160px;
}
#menuTree[data-show] {
  visibility:visible;
}
</style>


<!-- 弹出层 js 脚本 -->
<script>
    function initTree(){
        $.getJSON("/admin/menu/listTree?idate="+new Date().getTime(),function(data){
        	let treeData=[{id:"0",parent:"#",text:"顶级"}];
        	let newData=treeData.concat(data);
        	$('#menuTree').jstree({
        	    "core" : {
        	    "data" :newData,
        	    "themes" : {
        	        "icons" : false
        	     }
        	  },
        	  "plugins" : [ "wholerow" ]
        	});         	
        })
   	
    }
	function submitAccount() {
		var $form = $('#open-form');
		var loading = kit.loading('正在处理, 请稍候 .....');
		kit.post($form.attr('action'), $form.serialize(), function(ret) {
			loading.close();		// 关闭 loading 层
			if (ret.state == 'ok') {
				layer.closeAll();	// 提交成功关闭 open 弹出层
				
				kit.fill('/admin/menu/index', null, '#content-box');
			}
			kit.msg(ret, {time:3200, closeBtn:2});
		});
	}      
    (function($){
    	//初始化分类树
    	initTree();
    	$('#menuTree').on('changed.jstree', function (e, data) {
		    var i, j, r = [];
		    for(i = 0, j = data.selected.length; i < j; i++) {
		        var currentNode = data.instance.get_node(data.selected[i]);
		        $("#menuPid").val(currentNode.id);
		        $("#menuText").val(currentNode.text);
		        // 关闭树面板
		        hide();
		    }
	    });
    	var menuText=document.getElementById("menuText");
    	var onPopper=document.getElementById("menuTree");
    	
    	var popperInstance = new Popper(menuText, onPopper,{
    			        placement: 'bottom'
                    });	
    	
    	function show(ev) {
    		  ev.stopPropagation();
    		  onPopper.setAttribute('data-show', '');
    		  // We need to tell Popper to update the tooltip position
    		  // after we show the tooltip, otherwise it will be incorrect
    		  popperInstance.update();
    		}

    		function hide() {
    			onPopper.removeAttribute('data-show');
    		}	
    	const showEvents = ['focus'];
    	showEvents.forEach((event) => {
    		menuText.addEventListener(event,show,false);
    	});
    	
        $(document.body).on("click",function(evt){
        	// 点击空白处关闭下拉树
        	var triNode = $(evt.target).closest("div.menuNode");
        	if(triNode.length>0){
        		return;
        	}
            hide();
        });
		$('#open-form input:first').focus();
		// 绑定提交按钮事件
		$(".layui-layer-btn0").on("click", submitAccount);   	
    	
    })(jQuery)
</script>



